<script lang="ts" setup>
import {
    message,
    TableColumnsType,
    type TablePaginationConfig,
    type TableProps
} from 'ant-design-vue';

const columns: TableColumnsType = [
    {
        title: '设备编号',
        dataIndex: 'deviceCode',
        key: 'deviceCode',
        width: 150,
        align: 'center'
    },
    {
        title: '位置',
        dataIndex: 'deviceAddress',
        key: 'deviceAddress',
        width: 150,
        align: 'center'
    },
    {
        title: '状态',
        dataIndex: 'deviceStatus',
        key: 'deviceStatus',
        width: 150,
        align: 'center',
        filters: [
            {
                text: '在线',
                value: '在线'
            },
            {
                text: '离线',
                value: '离线'
            }
        ],
        onFilter: (value, record) => record.deviceStatus.startsWith(value)
    },
    {
        title: '装置压力',
        dataIndex: 'devicePressure',
        key: 'devicePressure',
        width: 150,
        align: 'center'
    },
    {
        title: '设备口径',
        dataIndex: 'deviceCaliber',
        key: 'deviceCaliber',
        width: 150,
        align: 'center'
    },
    {
        title: '设备区域',
        dataIndex: 'deviceRegion',
        key: 'deviceRegion',
        width: 150,
        align: 'center'
    },
    {
        title: '通信类型',
        dataIndex: 'communicationType',
        key: 'communicationType',
        width: 150,
        align: 'center'
    },
    {
        title: '增加流量',
        dataIndex: 'increaseFlow',
        key: 'increaseFlow',
        width: 150,
        align: 'center'
    },
    {
        title: '状态值',
        dataIndex: 'stateValue',
        key: 'stateValue',
        width: 150,
        align: 'center'
    },
    {
        title: '上传周期',
        dataIndex: 'uploadCycle',
        key: 'uploadCycle',
        width: 150,
        align: 'center'
    },
    {
        title: '采集周期',
        dataIndex: 'acquisitionCycle',
        key: 'acquisitionCycle',
        width: 150,
        align: 'center'
    },
    {
        title: '客户编号',
        dataIndex: 'clientId',
        key: 'clientId',
        width: 150,
        align: 'center'
    }
];

import { reactive, toRefs,  } from 'vue';


const props = withDefaults(
  defineProps<{
    data: IStandardPageModel<IPressureModel>;
  }>(),
  {
    data: () => (
            {
            items: [
            {
                id: 1,
                deviceStatus: '在线',
                deviceAddress: '科研实验室',
                deviceCode: '01',
                devicePressure: 0,
                deviceCaliber: 10,
                deviceRegion: '南大区',
                communicationType: '无线通信',
                stateValue: 9,
                uploadCycle: 1800,
                acquisitionCycle: 5,
                clientId: 1
            }
        ],
        meta: {
            total: 21,
            pages: 21,
            current: 1,
            pageSize: 10
        }}

    )

  }
);


const { data } = toRefs(props);
console.log('datadddddd:', data)

const emit = defineEmits<{ (e: "handlePageSize", arg: PageSize): void }>();


// table
import { useDebounce } from '@/hooks/debounce';
import { IPressureModel, IStandardPageModel } from '@/api/base/index.type'

const { debounce } = useDebounce();
const paginationSet: TablePaginationConfig = reactive({
    // ... 初始化你的分页配置
    total: data.value.meta.total,
    current: data.value.meta.current,
    pageSize: data.value.meta.pageSize,

    position: ['bottomCenter'],
    // showTotal: total => `共 ${total} 条数据`,
    // showSizeChanger: true,
    pageSizeOptions: ['10', '15', '20'],
           //对其分页防抖
    onChange:  debounce( (current: number, pageSize: any) => {
        paginationSet.current = current;
        emit("handlePageSize", { current: current, pageSize: pageSize } );
        message.success('点击页码了');
    },300),
    onShowSizeChange(current, pageSize) {
        paginationSet.pageSize = pageSize; // 修改每页显示的条数
        paginationSet.current = 1;
    }
});
</script>

<template>
  <a-table
    class="table"
    :columns="columns"
    :data-source="data.items"
    :pagination="paginationSet"
  >
  </a-table>
</template>

<style lang="scss" scoped>
@import "/src/assets/style/tableDeep.scss";
.table {
  width: 96%;
  height: 100%;
  margin: 10px auto;
  height: 80vh;
  overflow: scroll;

  //布局
  :deep(.ant-layout) {
    display: inline;
  }
}
</style>
